<div id="myVue" class="right_col" role="main">
    <h3>This is Vue test page.</h3>
    <p>======== 数据单向绑定 ========</p>
    <h4>{{company}}</h4>
    <p><span style="color: #ff0000;">{{companyError}}</span></p>
    <p>{{user.name | filter1 | filter2}}</p>
    <p>{{nameComputed}}</p>
    <p><span style="color: #ff0000;">{{userNameError}}</span></p>
    <p>{{user.age}}</p>
    <p>{{user.gender}}</p>
    <p>{{user.roles}}</p>
    <p>{{user.city}}</p>
    <form>
        <input type="text" :value="user.name" />
    </form>
    <p>======== 数据双向绑定 && 列表渲染 ========</p>
    <form>
        <p><input type="text" v-model.trim="company"/></p>
        <p><input type="text" v-model.trim="user.name"/></p>
        <p><input type="number" v-model.number="user.age"/></p>
        <p><span v-for="item in genders" ><input type="radio" :value="item" :key="item" v-model="user.gender"/> {{item}}
       </span>
        </p>
        <p>
            <span v-for="item in roles">
                <input type="checkbox" :value="item.id" :key="item.id" v-model="user.roles">{{item.name}}
            </span>
        </p>
        <p>
            <select v-model="user.city">
                <option v-for="(item,index) in cities" :value="item.id" :key="item.id">{{item.name}} -- {{index + 1}}</option>
            </select>
        </p>
        <p>
            <ul>
                <li v-for="item in cities" id="item.id" :key="item.id">{{item.name}}</li>
            </ul>
        </p>
        <p>
            <table>
                <tr><td>ID</td><td>Name</td></tr>
                <tr v-for="item in cities"><td>{{item.id}}</td><td>{{item.name}}</td></tr>
            </table>
        </p>
    </form>



    

    <p>======== 条件渲染 ========</p>
    <p><span v-if="user.name == 'HuJiang'">今天是个好天气</span></p>
    <p><span v-show="user.name == 'jianghu'">今天不是个好天气.......</span></p>

    <p>======== 事件绑定 ========</p>
    <p>
        <button @click="test1()">test1</button>
    </p>
    <p>
        <button name="btn" data="qqwwadawdas" @click="test2($event)">test2</button>
    </p>
    <p>======== 动画 ========</p>
        <p><button @click="show = !show">点击改变动画</button></p>
        <transition name="fade">
            <p v-show="show">显示动画</p>
        </transition>


    
</div>
<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity 2s
    }
    .fade-enter, .fade-leave-to {
        opacity: 0
    }
</style>


<script>
    $(function() {
        // alert("1111111111");
        // test1();
    });

    Vue.filter("filter1",function(value){
        if(!value ) {
            return "";
        }
        return value.replaceAll("a","*");
    });

    var myVue = new Vue({
        el:"#myVue",
        data: {
            company:"SFAC",
            companyError:"",
            user: {
                name:"HuJiang",
                age:18,
                gender:"male",
                roles:[],
                city:2,
            },
            userNameError:"",
            roles: [{id:1,name:"admin"},
                    {id:2,name:"manager"},
                    {id:3,name:"staff"},
        ],
            genders: ["male","female"],
            cities: [{id:1,name:"chengdu"},
                    {id:2,name:"chongqing"},
                    {id:3,name:"wuhan"},
                    {id:4,name:"nanjing"},
                    {id:5,name:"shanghai"},
        ],
            show:true,
        },
        //函数
        methods: {
            test1: function(){
                console.log("This is test 1 function");
            },
            test2: function(event){
                console.log(event.currentTarget.name);
                console.log(event.currentTarget.attributes.data.value);
            },
        },
        watch: {
            company(newValue,oldValue) {
                this.companyError = newValue.length > 6 ? "公司名太长了" : "";
            },
            "user.name"(newValue,oldValue) {
                this.userNameError = newValue.length > 6 ? "用户名太长了" : "";
            },
        },
        computed: {
            nameComputed:function() {
                return this.user.name.toUpperCase();
            },
        },
        filters:{
            filter2:function(value){
                if(!value){
                    return "";
                }
                return value.replaceAll("b","-");
            }
        },
        //vue页面初始化完成
        created () {
            window.test1 = this.test1;
        
        },
        // vue 实例加载完成，并且和页面元素绑定成功
        mounted () {
            this.test1();
        },
    });


</script>